﻿@page "/trees"
@inject IStringLocalizer<Trees> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<Tips class="mt-3">
    @((MarkupString)Localizer["TreeIntro"].Value)
</Tips>

<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Normal">
    <p>
        @((MarkupString)Localizer["P3"].Value)
    </p>
    <Tree Items="@Items" OnTreeItemClick="@OnTreeItemClick" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["P4"]" Introduction="@Localizer["P5"]" Name="Checkbox">
    <p>
        @((MarkupString)Localizer["P6"].Value)
    </p>
    <Tree Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" />
    <BlockLogger @ref="TraceChecked" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["P7"]" Introduction="@Localizer["P8"]" Name="ShowRadio">
    <p>
        @((MarkupString)Localizer["P9"].Value)
    </p>
    <Tree Items="@CheckedItems" ShowRadio="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P10"]" Introduction="@Localizer["P11"]" Name="TreeDisable">
    <p>
        @((MarkupString)Localizer["P12"].Value)
    </p>
    <Tree Items="@DisabledItems" ShowCheckbox="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="AccordionModel">
    <p>@((MarkupString)Localizer["P15"].Value)</p>
    <Tree Items="@Items" ShowCheckbox="true" IsAccordion="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P16"]" Introduction="@Localizer["P17"]" Name="DefauleExpand">
    <p>
        @((MarkupString)Localizer["P18"].Value)
    </p>
    <Tree Items="@ExpandItems" ShowCheckbox="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P19"]" Introduction="@Localizer["P20"]" Name="TreeDisplayIcon">
    <p>
        @((MarkupString)Localizer["P21"].Value)
    </p>
    <Tree Items="@GetIconItems()" ShowIcon="true" ShowCheckbox="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P22"]" Introduction="@Localizer["P23"]" Name="TreeClickExpand">
    <p>
        @((MarkupString)Localizer["P24"].Value)
    </p>
    <Tree Items="@Items" ShowIcon="true" ShowCheckbox="true" ClickToggleNode="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["P25"]" Introduction="@Localizer["P26"]" Name="TreeValidationForm">
    <p>
        @((MarkupString)Localizer["P27"].Value)
    </p>
    <ValidateForm Model="@Model">
        <Tree Items="@Items" OnTreeItemClick="@OnTreeItemClick" ShowCheckbox="true" />
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["P28"]" Introduction="@Localizer["P29"]" Name="TreeLazyLoading">
    <p>
        @((MarkupString)Localizer["P30"].Value)
    </p>
    <Tree ClickToggleNode="true" Items="@GetLazyItems()" OnExpandNode="OnExpandNode" />
</DemoBlock>

<DemoBlock Title="@Localizer["P31"]" Introduction="@Localizer["P32"]" Name="TreeCustomNode">
    <Tree ClickToggleNode="true" Items="GetTemplateItems()" />
</DemoBlock>

<DemoBlock Title="@Localizer["P33"]" Introduction="@Localizer["P34"]" Name="TreeNodeColor">
    <Tree ClickToggleNode="true" Items="GetColorItems()" />
</DemoBlock>

<DemoBlock Title="@Localizer["P35"]" Introduction="@Localizer["P36"]" Name="CheckedItems">
    <Tree ShowCheckbox="true" Items="@Items" OnTreeItemChecked="@OnTreeItemChecked" />
    <BlockLogger @ref="TraceCheckedItems" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["P37"]" Introduction="@Localizer["P38"]" Name="ShowSkeleton">
    <Button Text="@Localizer["P39"]" IsAsync="true" Icon="fa-solid fa-font-awesome" OnClick="OnLoadAsyncItems" />
    <Tree Items="@AsyncItems" ShowSkeleton="true" class="mt-3" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["P40"]" />
